<template>
  <div class="classList">
    <div class="classList_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">泛家居分类<i class="el-icon-close"></i></div>
    </div>

    <!-- 列表 -->
    <div class="classList_info">
      <!-- 新增按钮 -->
      <div class="classList_newBtn">
        <button @click="handerNewShop" style="margin-right:20px;"><i class="el-icon-trophy"></i>新增一级分类</button>
        卖场：
        <el-select
          v-model="marketId"
          clearable
          @change="selectMarket"
          filterable
          placeholder="请选择卖场"
        >
          <el-option
            v-for="item in marketList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <!-- 商品列表 -->
      <div class="shopList">
        <ul>
          <li class="shopList_item" v-for="(item,index) in cateList" :key="index">
            <!-- 一级分类 -->
            <div class="shopList_primary">
              <div class="shopList_left">
                <img :src="item.cate_logo" mode=""/>
                {{item.cate_name}}
                <el-tag size="mini" style="margin-left:10px;">{{item.market_name}}</el-tag>
              </div>
              <div class="shopList_right">
                <button @click="toShow(item.is_show,item.cate_id)">{{item.is_show==1?'隐藏':'显示'}}</button>
                <div @click="toAddScdCate(item.cate_id,item.cate_name,item.market_id)" title="新增二级分类"><i class="el-icon-plus"></i>
                </div>
                <div @click="toEditCate(item.cate_id)"><i class="el-icon-edit"></i></div>
                <div @click="toDelCate(item.cate_id)"><i class="el-icon-delete"></i></div>
              </div>
            </div>
            <!-- 二级分类 -->
            <ul class="shopList_second clearfix">
              <li v-for="(item1,index1) in item.child" :key="index1">
                <div class="shopList_left">
                  <img :src="item1.cate_logo" mode=""/>
                  {{item1.cate_name}}
                </div>
                <div class="shopList_right">
                  <button @click="toShow1(item1.is_show,item1.cate_id)">{{item1.is_show==1?'隐藏':'显示'}}</button>
                  <div @click="toEditScdCate(item1.cate_id,item.cate_id,item.cate_name)"><i class="el-icon-edit"></i>
                  </div>
                  <div @click="toDelCate(item1.cate_id)"><i class="el-icon-delete"></i></div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        cateList: [],  //分类
        priShow: '显示',  //一级
        scdShow: '显示',  //二级
        marketId: "", //卖场id
        marketList: [],
      };
    },
    mounted() {
      this.getCateList()
      this.remoteMethod();
    },
    methods: {
    // 获取卖场列表
    remoteMethod() {
      this.$http.post("/api/root/Market/marketList").then((res) => {
        console.log(res, "卖场列表");
        if (res.code == 1) {
          this.marketList = res.data ? res.data : [];
        }
      });
    },
    // 选择卖场
    selectMarket() {
      // this.page = 1
      // this.pageSize =10
      this.getCateList();
    },

      //   获取分类
      getCateList() {
        this.$http.post('/api/root/Cate/cateLst', {sale_type:2,market_id:this.marketId}).then(res => {
          if (res.code == 1) {
            this.cateList = res.data ? res.data : []
          }
        })
      },

      // 编辑一级分类
      toEditCate(id) {
        const type = 2;
        this.$router.push({name: 'extClassAdd', query: {id,type}})
      },

      //编辑二级分类
      toEditScdCate(id, pid, stepName) {
        this.$router.push({name: 'extClassAddSon', query: {id, pid, stepName}})
      },


      //点击一级分类加号
      toAddScdCate(pid, stepName, market_id) {
        this.$router.push({name: 'extClassAddSon', query: {pid, stepName, market_id}})
      },

      // 删除分类
      toDelCate(id) {
        this.$confirm('此操作将删除当前分类, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post('/api/root/cate/cateDel', {cate_id: id}).then(res => {
            if (res.code == 1) {
              this.getCateList()
              this.$message({
                type: 'success',
                message: '删除成功',
              })
            }
          })
        })
      },

      // 一级分类显示隐藏
      toShow(show, id) {
        let is_show = show == 1 ? 0 : 1;
        this.$http.post('/api/root/cate/setStatus', {cate_id: id, is_show}).then(res => {
          if (res.code == 1) {
            this.getCateList()
            this.$message({
              type: 'success',
              message: '操作成功'
            })
          }
        })
      },

      // 二级分类显示隐藏
      toShow1(show1, id) {
        let is_show = show1 == 1 ? 0 : 1;
        this.$http.post('/api/root/cate/setStatus', {cate_id: id, is_show}).then(res => {
          if (res.code == 1) {
            this.getCateList()
            this.$message({
              type: 'success',
              message: '操作成功'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      },

      // 新增按钮
      handerNewShop() {
        this.$router.push({path: '/extClassAdd'})
      },
    }
  };
</script>

<style lang="less" scoped>
  @import "index.less";
</style>
